<!-- 会员中心 -->
<template>
	<view>
		<view class="margin-top margin-lr radius u-relative"
			style="overflow: hidden;height: 260rpx;border-radius: 40rpx;">
			<u-image src="../../../static/images/me/beijing@2x.png" width="100%" height="400rpx"></u-image>
			<view class="u-abso margin" style="top: 0;">
				<view class="text-bold u-font-40">{{userName}}</view>
				<view class="margin-top-sm" style="color: #604320;" v-if="!isVIP">购买会员所有资源免费看</view>
				<view class="margin-top-sm" style="color: #604320;" v-else>会员到期：{{vipData}}</view>
			</view>
		</view>
		<view class="margin-lr padding bg-white"
			style="border-radius: 40rpx;position: relative;top: -80rpx;color: #000;">
			<view class="u-font-16 text-bold margin-bottom">开通会员</view>
			<view class="flex justify-between margin-bottom" v-for="(item, index) in VIPlist" :key="index">
				<view>
					<view class="u-font-40">{{item.money}}</view>
					<view class="" style="color: #7F8299;">{{item.type}}卡 •
						{{item.money}}金币/{{item.type}}/{{item.vipNameType==0?'30天':(item.vipNameType==1?'90天':'365天')}}
					</view>
				</view>
				<view>
					<view class="btn-bg" @click="bugVIP(item.id)">购买</view>
				</view>
			</view>
		</view>
		<view class="illustrate flex align-center justify-center">
			<view class="illustrate-box flex align-center">
				<u-checkbox active-color="#22a52d" v-model="checked" shape="circle"></u-checkbox>
				<text @click="checked = !checked">
					我已经阅读并同意
				</text>
				<view @click="goXieyi()" class="illustrate-box-txt">
					《付费须知说明》
				</view>
			</view>
		</view>

		<u-popup v-model="showPay" mode="bottom" border-radius="14" :closeable="true">
			<view
				style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;margin-top:15rpx;margin-bottom: 80rpx;">
				选择支付方式
			</view>
			<view @click="goMoney" class="flex align-center justify-end" style="margin-right: 20rpx;color: #ff7581;">
				<view class="" style="color: #666666;">
					金币不足？
				</view>
				去充值
			</view>
			<view style="display: flex;height: 100upx;align-items: center;padding: 20upx 30rpx;"
				v-for="(item,index) in openLists" :key='index' @tap='selectWay(item.id)'>
				<view style="display: flex;width:80%;align-items: center;">
					<image :src="item.image" style="width: 55upx;height: 55upx;"></image>
					<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">{{item.text}}
					</view>
				</view>
				<view style="width: 20%;display: flex;justify-content: flex-end;">
					<radio-group name="openWay" style="margin-left: 20upx;">
						<label class="tui-radio">
							<radio color="#ff7581" :checked="openWay === item.id ? true : false" />
						</label>
					</radio-group>
				</view>
			</view>
			<view
				style="width: 690rpx;height: 80rpx;background:#ff7581;color:#FFFFFF;text-align: center;line-height: 80rpx;border-radius: 50rpx;margin: 30rpx;"
				@tap="pay()">确认支付</view>
		</u-popup>

		<!-- 会员助力 -->
		<u-popup v-model="showjl" :closeable="true" close-icon-color="#ffffff" mode="center">
			<view class="zl" @click="goZl()">
				<image class="zl-bg"
					src="https://duanju.xianmxkj.com/file/uploadPath/2023/12/14/adf37beca97826d44970d20118f88e29.png"
					mode=""></image>
				<view class="zl-title">
					会员免费领
				</view>
				<view class="zl-titlef">
					免费领会员
				</view>
				<view class="zl-titlef2">
					助力中...
				</view>
				<view class="zl-titlebtn">
					立即领取
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<!-- 抖音im客服 -->
		<ttMsg />
	</view>
</template>

<script>
	import ttMsg from '../../../components/ttMsg/ttMsg.vue'
	export default {
		components: {
			ttMsg
		},
		data() {
			return {
				userName: '匿名',
				VIPlist: '',
				showPay: false,
				openWay: 0,
				openLists: [],
				vipId: '',
				vipData: '',
				isVIP: false,
				showjl: false,
				checked: false,
			}
		},
		onLoad() {
			// #ifdef APP
			if (plus.os.name.toLowerCase() === 'android') {
				this.openLists = [{
					image: '/static/images/pay/weixin.png',
					text: '微信',
					id: 1
				}, {
					image: '/static/images/pay/zhifubao.png',
					text: '支付宝',
					id: 2
				}, {
					image: '/static/images/pay/lingqian.png',
					text: '金币支付',
					id: 3
				}]
				this.openWay = 1;
			} else {
				let checkIosPay = this.$queue.getData('checkIosPay');
				if (checkIosPay === '是') {
					this.openLists = [{
						image: '/static/images/pay/lingqian.png',
						text: '金币支付',
						id: 3
					}];
					this.openWay = 3;
				} else {
					this.openLists = [{
						image: '/static/images/pay/weixin.png',
						text: '微信',
						id: 1
					}, {
						image: '/static/images/pay/zhifubao.png',
						text: '支付宝',
						id: 2
					}, {
						image: '/static/images/pay/lingqian.png',
						text: '金币支付',
						id: 3
					}];
					this.openWay = 1;
				}
			}

			// #endif 

			// #ifdef MP-WEIXIN
			this.openLists = [
					// {
					// 	image: '/static/images/pay/weixin.png',
					// 	text: '微信',
					// 	id: 1
					// },
					{
						image: '/static/images/pay/lingqian.png',
						text: '金币支付',
						id: 3
					}
				],
				this.openWay = 3;
			// #endif

			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				this.openLists = [{
						image: '/static/images/pay/weixin.png',
						text: '微信',
						id: 1
					}, {
						image: '/static/images/pay/lingqian.png',
						text: '金币支付',
						id: 3
					}],
					this.openWay = 1;
			} else {
				this.openLists = [{
						image: '/static/images/pay/zhifubao.png',
						text: '支付宝',
						id: 2
					}, {
						image: '/static/images/pay/lingqian.png',
						text: '金币支付',
						id: 3
					}],
					this.openWay = 2;
			}

			// #endif
			// #ifdef MP-TOUTIAO
			this.openLists = [{
				image: '/static/images/pay/zhifubao.png',
				text: '抖音支付',
				id: 4
			}, {
				image: '/static/images/pay/lingqian.png',
				text: '金币支付',
				id: 3
			}]
			this.openWay = 4;
			// #endif
			// #ifdef MP-KUAISHOU
			const osName = uni.getSystemInfoSync().osName;
			if (osName != 'ios') { //安卓
				this.openLists = [{
					image: '/static/images/pay/zhifubao.png',
					text: '快手支付',
					id: 5
				}, {
					image: '/static/images/pay/lingqian.png',
					text: '金币支付',
					id: 3
				}]
				this.openWay = 5
			} else {
				this.openLists = [{
					image: '/static/images/pay/lingqian.png',
					text: '金币支付',
					id: 3
				}]
				this.openWay = 3
			}
			// #endif
			if (uni.getStorageSync('token')) {
				this.$Request.get('/app/common/type/813').then(res => {
					if (res.code == 0 && res.data.value) {
						if (res.data.value == '是') {
							this.getActivity()
						}
					}
				})
			}

			this.userName = uni.getStorageSync('userName')
			this.getVIPDet()
			this.getvipdata()
		},
		methods: {
			//去付费须知说明
			goXieyi() {
				uni.navigateTo({
					url: '/me/setting/payXieYi'
				})
			},
			goMoney() {
				uni.navigateTo({
					url: '/me/wallet/wallet'
				})
			},
			// 获取活动等级
			getActivity() {
				this.$Request.getT('/app/invite/selectInviteAwardByUserId').then(res => {
					if (res.code == 0) {
						if (res.data) {
							this.showjl = true
						}
					}
				})
			},
			//去助力页面
			goZl() {
				uni.navigateTo({
					url: '/me/assistance/assistance'
				})
				this.showjl = false
			},
			getvipdata() {
				let data = {
					userId: uni.getStorageSync('userId')
				}
				this.$u.api.userVip(data).then(res => {
					if (res.code == 0 && res.data && res.data.isVip == 2) {
						this.isVIP = true;
						this.vipData = res.data.endTime
					} else {
						this.isVIP = false

					}
				})
			},
			selectWay: function(id) {
				this.openWay = id;
			},
			getVIPDet() {
				this.$u.api.vipDet().then(res => {
					if (res.code == 0) {
						res.data.forEach(ret => {
							switch (ret.vipNameType) {
								case 0:
									ret.type = '月'
									break;
								case 1:
									ret.type = '季'
									break;
								case 2:
									ret.type = '年'
									break;
							}
						})
						this.VIPlist = res.data
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			bugVIP(e) {
				if (this.checked == false) {
					this.$refs.uToast.show({
						title: '请阅读并同意《付费须知说明》',
						duration: 1500
					})
					return
				}
				this.vipId = e
				this.showPay = true
				// // #ifdef MP-TOUTIAO
				// this.toutiaoPay()
				// // #endif
				// // #ifndef MP-TOUTIAO
				// this.showPay = true
				// // #endif

			},
			//头条支付
			toutiaoPay() {
				let that = this
				let data = {
					vipDetailsId: this.vipId
				}
				uni.showLoading({
					title: '支付中...'
				})
				this.$Request.getT('/app/order/insertVipOrders', data).then(res => {
					if (res.code == 0) {
						this.$Request.postT('/app/dyPay/payVirtualAppOrder', {
							orderId: res.data.ordersId
						}).then(ret => {
							if (ret.code == 0) {
								// console.log(JSON.parse(ret.data))
								let options = {
									data: JSON.stringify(ret.data.data),
									byteAuthorization: JSON.stringify(ret.data.byteAuthorization)
								}
								tt.requestOrder({
									data: JSON.stringify(ret.data.data), // 请勿在前端对data做任何处理
									byteAuthorization: ret.data
										.byteAuthorization, // 请勿在前端对byteAuthorization做任何处理
									success(redd) {
										console.log(JSON.stringify(redd))
										tt.getOrderPayment({
											orderId: redd.orderId,
											success(reee) {
												uni.hideLoading()
												uni.showToast({
													title: '支付成功',
												})
												setTimeout(d => {
													let data = {
														userId: uni
															.getStorageSync(
																'userId')
													}
													that.$u.api.userVip(data).then(
														res => {
															if (res.code ==
																0 && res
																.data && res
																.data
																.isVip ==
																2) {
																uni.setStorageSync(
																	'isVIP',
																	true)
															} else {
																uni.setStorageSync(
																	'isVIP',
																	false)
															}
														})
													setTimeout(d => {
														let data = {
															flag: true
														}
														uni.$emit('back',
															data)
														uni.navigateBack(1)
													}, 1000);
												}, 2000)
											},
											fail(ee) {
												uni.hideLoading()
												uni.showToast({
													title: '支付失败，请重试',
													icon: 'none'
												})
												console.log(ee)
											}
										});

									},
									fail(e) {
										uni.hideLoading()
										uni.showToast({
											title: '支付失败，请重试',
											icon: 'none'
										})
										console.log(e)
									}
								});
							} else {
								uni.hideLoading()
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			pay() {
				let that = this
				if (that.openWay == 4) { //抖音支付
					that.toutiaoPay()
				} else if (that.openWay == 5) { //快手支付
					uni.showLoading({
						title: '支付中...'
					})
					let data = {
						vipDetailsId: that.vipId
					}
					this.$Request.getT('/app/order/insertVipOrders', data).then(res => {
						if (res.code == 0) {
							this.$Request.postT('/app/ksPay/payAppOrder', {
								orderId: res.data.ordersId
							}).then(ree => {
								if (ree.code == 0) {
									ks.pay({
										serviceId: '1', //服务类型id（固定值为‘1’）
										orderInfo: ree.data,
										success(succ) {
											uni.hideLoading()
											uni.showToast({
												title: '支付成功'
											})
											let data = {
												userId: uni.getStorageSync('userId')
											}
											that.$u.api.userVip(data).then(res => {
												if (res.code == 0 && res.data && res.data
													.isVip ==
													2) {
													uni.setStorageSync('isVIP', true)
												} else {
													uni.setStorageSync('isVIP', false)
												}
											})
											setTimeout(d => {
												let data = {
													flag: true
												}
												uni.$emit('back', data)
												uni.navigateBack(1)
											}, 1000);
										},
										fail(err) {
											uni.hideLoading()
											that.$refs.uToast.show({
												title: '支付失败，请重试!',
												duration: 1500
											})
										},
									})
								} else {
									uni.hideLoading()
									this.$refs.uToast.show({
										title: ree.msg,
										duration: 1500
									})
								}
							})
						} else {
							uni.hideLoading()
							this.$refs.uToast.show({
								title: res.msg,
								duration: 1500
							})
						}
					})

				} else {
					let data = {
						vipDetailsId: that.vipId
					}
					let userId = uni.getStorageSync('userId')
					that.$u.api.VipOrders(data).then(res => {
						if (that.openWay == 1) {
							// #ifdef MP-WEIXIN
							that.$u.post('app/wxPay/wxPayJsApiOrder?orderId=' + res.data.ordersId).then(ret => {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: ret.data.timestamp,
									nonceStr: ret.data.noncestr,
									package: ret.data.package,
									signType: ret.data.signType,
									paySign: ret.data.sign,
									success: function(suc) {
										console.log('success:' + JSON.stringify(suc));
										that.showPay = false
										uni.showToast({
											title: '支付成功',
											icon: 'success'
										})

										let data = {
											userId: uni.getStorageSync('userId')
										}
										that.$u.api.userVip(data).then(res => {
											if (res.code == 0 && res.data && res.data
												.isVip ==
												2) {
												uni.setStorageSync('isVIP', true)
											} else {
												uni.setStorageSync('isVIP', false)
											}
										})
										setTimeout(d => {
											let data = {
												flag: true
											}
											uni.$emit('back', data)
											uni.navigateBack(1)
										}, 1000);
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										})
									}
								});
							});
							// #endif
							// #ifdef H5
							let ua = navigator.userAgent.toLowerCase();
							if (ua.indexOf('micromessenger') !== -1) {
								this.$u.post('/app/wxPay/wxPayMpOrder?orderId=' + res.data.ordersId).then(red => {
									if (red.code === 0) {
										this.callPay(red.data);
									} else {
										uni.showToast({
											icon: 'none',
											title: '支付失败!'
										});
									}
								});
							}
							// #endif
							// #ifdef APP
							this.$u.post("/app/wxPay/payAppOrder?orderId=" + res.data.ordersId).then(red => {
								if (red.code == 0) {
									that.setPayment('wxpay', JSON.stringify(red
										.data));
								} else {
									uni.showToast({
										title: red.msg,
										icon: 'none'
									})
								}
							});
							// #endif
						} else if (that.openWay == 2) {
							// #ifdef H5
							this.$u.post('/app/aliPay/payOrder?orderId=' + res.data.ordersId + '&classify=2').then(
								red => {
									if (red.code === 0) {
										const div = document.createElement('div')
										// if(red.data.startsWith("http")) {
											// window.location.href  = res.data
										// } else {
											div.innerHTML = red.data //此处form就是后台返回接收到的数据
											document.body.appendChild(div)
											document.forms[0].submit()
										// }
									} else {
										uni.showToast({
											icon: 'none',
											title: '支付失败!'
										});
									}
								});
							// #endif
							// #ifdef APP
							this.$u.post('/app/aliPay/payOrder?orderId=' + res.data.ordersId + '&classify=1').then(
								red => {
									if (red.code === 0) {
										console.log('1111111')
										that.setPayment('alipay', red.data);
									} else {
										uni.showToast({
											icon: 'none',
											title: '支付失败!'
										});
									}
								});
							// #endif
						} else if (that.openWay == 3) {
							that.$queue.showLoading('支付中...')
							that.$Request.postT("/app/order/payOrders", {
								orderId: res.data.ordersId,
							}).then(red => {
								uni.hideLoading();
								if (red.code == 0) {
									that.showPay = false
									uni.showToast({
										title: '支付成功',
										icon: 'success'
									})

									let data = {
										userId: uni.getStorageSync('userId')
									}
									that.$u.api.userVip(data).then(res => {
										if (res.code == 0 && res.data && res.data
											.isVip ==
											2) {
											uni.setStorageSync('isVIP', true)
										} else {
											uni.setStorageSync('isVIP', false)
										}
									})
									setTimeout(d => {
										let data = {
											flag: true
										}
										uni.$emit('back', data)
										uni.navigateBack(1)
									}, 1000);
								} else {
									that.$queue.showToast(red.msg)
								}
							});
						}


					})
				}

			},
			isCheckPay(code, name, order) {
				if (code == 0) {
					console.log('999999999999')
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误'
					});
				}
			},
			setPayment(name, order) {
				let that = this
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						uni.hideLoading();
						that.showPay = false
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						})

						let data = {
							userId: uni.getStorageSync('userId')
						}
						that.$u.api.userVip(data).then(res => {
							if (res.code == 0 && res.data && res.data
								.isVip ==
								2) {
								uni.setStorageSync('isVIP', true)
							} else {
								uni.setStorageSync('isVIP', false)
							}
						})
						setTimeout(d => {
							let data = {
								flag: true
							}
							uni.$emit('back', data)
							uni.navigateBack(1)
						}, 1000);
					},
					fail: function(err) {
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				console.log("response)))):" + JSON.stringify(response))
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							that.showPay = false
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})

							let data = {
								userId: uni.getStorageSync('userId')
							}
							that.$u.api.userVip(data).then(res => {
								if (res.code == 0 && res.data && res.data
									.isVip ==
									2) {
									uni.setStorageSync('isVIP', true)
								} else {
									uni.setStorageSync('isVIP', false)
								}
							})
							setTimeout(d => {
								let data = {
									flag: true
								}
								uni.$emit('back', data)
								uni.navigateBack(1)
							}, 1000);
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
		}
	}
</script>

<style lang="scss">
	.custom-style {
		/* background: linear-gradient(90deg, #DBC084 0%, #E9D4A6 100%); */
		/* padding: 0px 16px; */
		/* border: 0px; */
		color: #604320;
	}

	.illustrate {
		width: 100%;
		margin: 30rpx 0;

		.illustrate-box {
			width: 686rpx;
		}

		.illustrate-box-txt {
			color: #22a52d;
		}

	}

	/deep/.u-radio__label {
		display: none !important;
	}

	/* #ifdef MP-TOUTIAO */
	/deep/radio::before {
		content: '' !important;
	}

	/* #endif */


	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}

	.zl {
		width: 518rpx;
		height: 556rpx;
		position: relative;
		background: transparent;

		.zl-bg {
			width: 518rpx;
			height: 556rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.zl-title {
			position: absolute;
			top: 15%;
			left: 46%;
			transform: translate(-50%, 100%);
			font-size: 44rpx;
			font-weight: bold;
			color: #F24364;
			background: linear-gradient(0deg, #FF5878 0.390625%, #F30931 100%);
			background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.zl-titlef {
			font-size: 14rpx;
			font-weight: bold;
			color: #ffffff;
			position: absolute;
			top: 41%;
			right: 35%;
		}

		.zl-titlef2 {
			font-size: 14rpx;
			font-weight: bold;
			color: #ffffff;
			position: absolute;
			top: 48%;
			left: 22%;
		}

		.zl-titlebtn {
			font-size: 34rpx;
			font-weight: bold;
			background: linear-gradient(0deg, #FF5878 0.390625%, #F30931 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			position: absolute;
			bottom: 10%;
			left: 50%;
			transform: translate(-65%, 50%);
		}
	}

	.btn-bg {
		width: 64px;
		height: 28px;
		background: linear-gradient(90deg, #DBC084 0%, #E9D4A6 100%);
		color: #604320;
		border-radius: 28px;
		text-align: center;
		line-height: 28px;
		margin-top: 4px;
	}
</style>